<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
<!--    <item :item="column" :value="modelValue" />-->
  <div>
    <img :src="modelValue"
         alt=""
         width="80"
         height="50" />

      <div v-if="isDisabled" > <el-link type="primary" @click="openSign()">去签名</el-link></div>
  </div>

  <el-dialog  v-model="signVisible" title="签名" >
        <avue-sign ref="sign"></avue-sign>
        <el-button type="primary"
                   @click="handleSubmit">生成</el-button>
        <el-button type="danger"
                   @click="$refs.sign.getStar(renderData('company','这里是用途'),renderData('used','这里是单位的名称'),renderData('num','123456'))">图章</el-button>
        <el-button @click="$refs.sign.clear()">清空</el-button>
  </el-dialog>

</template>

<script>
    import {uploadImgByBase64} from "@/framework-core/api/comm";
export default {
  name: 'JrSignature',
  inject: ['getViewFormData'],
  props: {
    item: {
      type: Object,
      default: () => {
      }
    },
    modelValue: {
      type: String,
      default: () => {
      }
    },
    column: {
      type: Object,
      default: () => {
      }
    }
  },
    computed: {
        isDisabled: function () {
            if(!this.column){
                return true;
            }
            return  !this.column.disabled;
        }
    },

    // emits: ['update:value'],
  data() {
    return {
        signVisible: false,
        formData:{},
        value:""
    }
  },
    mounted(){
        if( this.getViewFormData){
            this.formData = this.getViewFormData()
            this.value =   this.formData[this.column.prop] ;
        }
    },
  methods: {
      openSign() {
          this.signVisible = true;
      },
      renderData(d,t) {
        var data = this.item[d] || t;
        if (!data) {
          return data;
        }
        if (this.getViewFormData) {
          this.formData = this.getViewFormData()
        }
        return data.replace(/{{(\w+)}}/g, (match, key) => this.formData ? (this.formData[key] || "") : "");
      },
      handleSubmit() {
          this.value = this.$refs.sign.submit(80, 50);
          this.signVisible = false;
           this.column.disabled= false;
          //this.$emit('change', value, this.img);
          console.log(this.value)
          let $that = this;
          uploadImgByBase64(this.value)
              .then((res) => {
                  var img = res.data.data.data.url;
                  //$that.$emit("update:modelValue",img)
                  $that.formData[$that.column.prop] =img;
                  // $that.$emit('input', img);
                  // $that.$emit("update:value.",img)
              })
              .catch((err) => {
                  $that.$message.error(err.msg || err.message)
              })
              .finally(() => {
                  //$that.loading = true
              })

      }
  }
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
  font-size: 14px;
  .label {
    color: #323233;
    vertical-align: middle;
    word-wrap: break-word;
    font-weight: 600;
    width: 6.2em;
    margin-right: 12px;
  }
  .img {
    position: relative;
    img {
      max-width: 150px;
      max-height: 30px;
    }
  }
}
.btn {
  display: inline-block;
  color: blue;
  cursor: pointer;
  font-size: 16px;
}
.btn1 {
  font-size: 16px;
  color: #666;
}
.required {
  &::before{
    position: absolute;
    left: 8px;
    color: #ee0a24;
    font-size: 14px;
    content: '*';
  }
}
</style>

